<template>
	<el-card style="height: 100%;">
		<i id="span1" class="el-icon-orange"> 添加</i>
		<div>
			<el-form :inline="true" :model="addServicetypesForm" class="demo-form-inline">
				<el-form-item label="分类名称:">
					<el-input v-model="addServicetypesForm.typename" placeholder="分类名称"></el-input>
				</el-form-item>
				<el-form-item label="分类排序:">
					<el-input v-model="addServicetypesForm.sort" placeholder="分类排序"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addServicetypes()">添加</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 分割线 -->
		<el-divider style="width: 100%;"></el-divider>
		<i id="span2" class="el-icon-truck"> 服务类别</i>
		<div>
			<el-table :data="serviceTypes" border style="width: 100%">
				<el-table-column prop="typename" label="服务分类"></el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button @click="selectTypeById(scope.row.id)" type="text" size="small">编辑</el-button> |
						<!-- 气泡确认框 -->
						<el-popconfirm title="确定删除吗？" @confirm="selectServiceByRID(scope.row.id)">
							<el-button slot="reference" type="text" size="small">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="修改服务类别" :visible.sync="updateTypedialog">
			<i id="span1" class="el-icon-orange">修改类别</i>
			<el-divider></el-divider>
			<div>
				<el-form size="mini" ref="updateTypeForm" :model="updateTypeForm" label-width="80px">
					<el-form-item label="ID">
						<el-input v-model="updateTypeForm.id" :disabled="true" :value="updateTypeForm.id"></el-input>
					</el-form-item>
					<el-form-item label="服务分类">
						<el-input v-model="updateTypeForm.typename" :value="updateTypeForm.typename"></el-input>
					</el-form-item>
					<el-form-item label="排序">
						<el-input v-model="updateTypeForm.sort" :value="updateTypeForm.sort" placeholder=""></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="updateType()">修改</el-button>
						<el-button @click="resertUpdateType()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				addServicetypesForm: {
					typename: '',
					sort: ''
				},
				updateTypeForm: {
					typename: '',
					sort: ''
				},
				serviceTypes: [],
				updateTypedialog: false
			}
		},
		beforeMount: function() {
			this.selectAllTypes() // 当前页面加载完，立马执行该方法
		},
		methods: {
			// 查询所有的服务分类
			async selectAllTypes() {
				let res = await this.$http.get('selectTypes')
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.serviceTypes = res.data.data;
				}
			},
			async addServicetypes() {
				var param = new URLSearchParams();
				param.append('typename', this.addServicetypesForm.typename);
				param.append('sort', this.addServicetypesForm.sort);
				let res = await this.$http.post("addServiceTypes", param);
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.serviceTypes = res.data.data;
					this.addServicetypesForm.typename = ''
					this.addServicetypesForm.sort = ''
					this.selectAllTypes()
				}
			},
			/* 通过id查询 */
			async selectTypeById(id) {
				// alert(id)
				var res = await this.$http.get('selectTypeById?id=' + id);
				if (res.data.code == 200) {
					// 把查询后的对象，赋值给data中的 updateTypeForm
					this.updateTypeForm = res.data.data;
					// 开启修改页面的对话框，显示
					this.updateTypedialog = true
				} else {
					this.$message.error('查无此数据!')
				}
			},
			/* 通过id修改 */
			async updateType() {
				var param = new URLSearchParams();
				param.append('typename', this.updateTypeForm.typename);
				param.append('sort', this.updateTypeForm.sort);
				param.append('id', this.updateTypeForm.id);
				let res = await this.$http.post("updateTypeById", param);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.updateTypeForm.typename = ''
					this.updateTypeForm.sort = ''
					this.selectAllTypes()
					this.updateTypedialog = false
				}
			},
			resertUpdateType() {
				this.$refs['updateTypeForm'].resetFields();
				this.updateTypedialog = false
			},
			async selectServiceByRID(typeid) {

				let res = await this.$http.get('selectServiceByTypeId?typeid=' + typeid)
				if (res.data.code == 400) {
					// alert('可以删除')
					this.deleteTypeId(typeid)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			async deleteTypeId(typeid) {
				let res = await this.$http.get('deleteTypeById?id=' + typeid)
				if (res.data.code = 200) {
					this.$message.success(res.data.msg)
					this.selectAllTypes()
				}
			},

		}
	}
</script>

<style>
	#span1 {
		float: left;
		margin-left: 0px;
	}

	#span2 {
		float: left;
		margin-left: 0px;
	}

	/* 添加表单样式 */
	.el-form {
		/* float: left; */
		margin-top: 30px;
	}

	.el-table {
		margin-top: 55px;
	}
</style>